<template>
  <div class="statisticsChart zy-content">
    <div class="searchBox search-box-layout mb16">
      <Row :gutter="24">
        <Col span="4">
          <div>
            <p class="label">{{ $t("工站") }}</p>
            <div class="ipt">
              <Cascader
                clearable
                :data="orgList"
                v-model="searchParams.orgCode"
                :placeholder="`${$t('common.selectInfo')}`"
                change-on-select
              >
              </Cascader>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t("问题类型") }}</p>
            <div class="ipt">
              <Select
                v-model="searchParams.issueType"
                clearable
                filterable
                :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                  v-for="(item, index) of issueTypeList"
                  :value="item.name"
                  :key="index"
                  >{{ item.name }}</Option
                >
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t("原因代码") }}</p>
            <div class="ipt">
              <Select
                v-model="searchParams.reasonCode"
                clearable
                filterable
                :placeholder="`${$t('common.selectInfo')}`"
              >
                <Option
                  v-for="(item, index) of reasonList"
                  :value="item.reasonCode"
                  :key="index"
                  >{{ item.reasonCode + "-" + item.reasonDesc }}</Option
                >
              </Select>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label">{{ $t("common.Date") }}</p>
            <div class="ipt">
              <DatePicker
                type="daterange"
                v-model="timeList"
                split-panels
                placement="bottom"
                transfer
                :placeholder="`${$t('common.selectInfo')}${$t('common.Date')}`"
                :clearable="false"
              >
              </DatePicker>
            </div>
          </div>
        </Col>
        <Col span="4">
          <div>
            <p class="label hide-label">--</p>
            <div class="ipt">
              <Button class="search-btn" type="primary" @click="changeNum" v-has="'andonTaskQueryReports'">{{
                $t("common.Query")
              }}</Button>
              <Button class="reset-btn" @click="resetSearch()" v-has="'andonTaskQueryReports'"
                >{{ $t("common.reset") }}
              </Button>
            </div>
          </div>
        </Col>
      </Row>
    </div>
    <div class="list-layout mt16">
      <!-- 批量删除 批量导出  批量导入 下载模板 新增-->
      <div class="btns clear">
        <span class="title">{{ $t("common.listInformation") }}</span>
        <Button @click="exportTemplateClick" v-has="'andonTaskExportReports'">{{$t("common.batchExport")}}</Button>
      </div>
      <!-- 表格 -->
      <div class="tableContent">
        <Table
            class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columns"
          ellipsis
          ref="selection"
          stripe
          :data="dataArr"
        >
        </Table>
      </div>
      <!-- 分页 -->
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" />
        <Page
          :total="total"
          :page-size="pageSize"
          :page-size-opts="$variable.pageSizes"
          :current="pageNum"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          show-sizer
          show-total
        />
      </div>
    </div>
  </div>
</template>

<script>
import recursion from "../../../util/recursion";
import { searchApi } from "@/api/andon/reasonCode/index.js";
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
  name: "statisticsChart",
  components: {},
    mixins:[toggleTableOperation],
  data() {
    return {
      timeList: [
        this.$moment(new Date()).subtract(6, "days").format("YYYY-MM-DD"),
        this.$moment(new Date()).format("YYYY-MM-DD"),
      ],
      total: 0,
      columns: [
        {
          // title: `产线`,
          title: `${this.$t("工站")}`,
          key: "position4",
          minWidth: 220,
          align: "center",
            resizable: true
        },
        {
          // title: `工作中心代码`,
          title: `${this.$t("工作中心")}`,
          key: "workcenter",
          minWidth: 150,
          align: "center",
            resizable: true
        },
        {
          // title: `生产订单号`,
          title: `${this.$t("生产订单号")}`,
          key: "productionOrder",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `安灯单号`,
          title: `${this.$t("安灯单号")}`,
          key: "issueID",
          minWidth: 150,
          align: "center",
            resizable: true
        },
        {
          // title: `安灯类型`,
          title: `${this.$t("安灯类型")}`,
          key: "issueType",
          minWidth: 150,
          align: "center",
            resizable: true
        },
        {
          // title: `原因代码`,
          title: `${this.$t("原因代码")}`,
          key: "reasonCode",
          minWidth: 150,
          align: "center",
            resizable: true
        },
        {
          // title: `原因代码描述`,
          title: `${this.$t("原因代码描述")}`,
          key: "reasonDesc",
          minWidth: 200,
          align: "center",
            resizable: true
        },
        {
          // title: `描述`,
          title: `${this.$t("描述1")}`,
          key: "comment",
          minWidth: 150,
          align: "center",
            resizable: true
        },
       /* {
          // title: `班次`,
          title: `${this.$t("班次")}`,
          key: "shift",
          minWidth: 150,
          align: "center",
        },*/
        {
          // title: `开始时间`,
          title: `${this.$t("开始时间")}`,
          key: "startTime",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `安灯发起人`,
          title: `${this.$t("安灯发起人")}`,
          key: "openedBy",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `响应时间`,
          title: `${this.$t("响应时间")}`,
          key: "acknowledgedTime",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `响应时长`,
          title: `${this.$t("响应时长")}(min)`,
          key: "durationTillAcknowledgement",
          minWidth: 280,
          align: "center",
            resizable: true
        },
        {
          // title: `响应人`,
          title: `${this.$t("响应人")}`,
          key: "acknowledgedBy",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `结束时间`,
          title: `${this.$t("结束时间1")}`,
          key: "finishTime",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `关单人`,
          title: `${this.$t("关单人")}`,
          key: "closedBy",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `处理时长`,
          title: `${this.$t("处理时长")}(min)`,
          key: "durationBetweenAcknowledgeFinishTime",
          minWidth: this.util.autoWidth(150,380),
          align: "center",
            resizable: true
        },
        {
          // title: `总时长`,
          title: `${this.$t("总时长")}(min)`,
          key: "totalDuration",
          minWidth: 180,
          align: "center",
            resizable: true
        },
        {
          // title: `状态`,
          title: `${this.$t("状态")}`,
          key: "andonStatus",
          minWidth: 150,
          align: "center",
            resizable: true
        },
      ],
      dataArr: [],
      pageSizeOption: [10, 20, 30, 40],
      pageNum: 1,
      pageSize: 10,
      searchParams: {},
      orgList: [],
      issueTypeList: [
        { id: 1, name: '设备问题' },
        { id: 2, name: '质量问题' },
        { id: 3, name: '物料问题' },
        { id: 4, name: '工艺问题' },
        { id: 5, name: '人为问题' },
        { id: 6, name: '其他问题' }
      ],
      list: [],
      reasonList: [
        {
          reasonCode: '27_M1',
          reasonDesc: 'T4-1 等待物料'
        },
        {
          reasonCode: '27_P2',
          reasonDesc: 'T4-2 等待维修'
        },
        {
          reasonCode: '27_Q1',
          reasonDesc: 'T3-1 来料返工'
        },
        {
          reasonCode: '27_Q2',
          reasonDesc: 'T3-4 拒收返工'
        },
        {
          reasonCode: '27_Q3',
          reasonDesc: 'T3-2 过程返工'
        },
        {
          reasonCode: '27_O1',
          reasonDesc: 'T4-6 新员工效率损失'
        },
        {
          reasonCode: '27_P1',
          reasonDesc: 'T2-2 员工过程调整'
        },
        {
          reasonCode: '27_P4',
          reasonDesc: 'T4-3 订单异常'
        },
        {
          reasonCode: '27_O2',
          reasonDesc: 'T4-4 等待其他相关部门支持'
        },
        {
          reasonCode: '27_P3',
          reasonDesc: 'T4-5 MES 系统 1PA 系统'
        }
      ],
    };
  },
  created() {
      this.getColumnWidth(this.columns)
  },
  mounted() {
    this.getOrgList();
    this.searchList();
  },
  methods: {
    resetSearch(){
        this.searchParams = {}
        this.timeList= [
          this.$moment(new Date()).subtract(6, "days").format("YYYY-MM-DD"),
          this.$moment(new Date()).format("YYYY-MM-DD"),
        ],
        this.changeNum()
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },
    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    getOrgList() {
      this.axios({
        method: "get",
        url: "/basic/organization/findListByToken",
        params: {},
      }).then((res) => {
        if (res.code === 200) {
          const obj = {
            label: "name",
            value: "code",
            children: "children",
          };
          this.orgList = recursion.convertTree(res.data, obj);
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    searchList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      params.orgCode = params.orgCode && params.orgCode.at(-1);
      if (this.timeList[1]) {
        params.startTime = this.$moment(this.timeList[0]).format(
          "YYYY-MM-DD 00:00:00"
        );
        params.endTime = this.$moment(this.timeList[1]).format(
          "YYYY-MM-DD 23:59:59"
        );
      }
      this.axios({
        method: "get",
        url: "/dms/andonTask/queryReports",
        params: params,
      }).then((res) => {
        if (res.code === 200) {
          this.dataArr = res.data.list;
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //导出
    exportTemplateClick() {
      let params = {};
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      params.orgCode = params.orgCode && params.orgCode.at(-1);
      if (this.timeList[1]) {
        params.startTime = this.$moment(this.timeList[0]).format(
          "YYYY-MM-DD 00:00:00"
        );
        params.endTime = this.$moment(this.timeList[1]).format(
          "YYYY-MM-DD 23:59:59"
        );
      }
      const filName = "Andon";
      this.axios({
        method: "get",
        url: "/dms/andonTask/exportReports",
        responseType: "blob",
        params: params,
      }).then((res) => {
        fileDownload(res, filName + ".xlsx");
      });
    },
  },
};
</script>
<style scoped lang="scss"></style>
